<template>
  <div class="user-note-info card card-color card-margin">
    <transition-group v-bind:css="false"
                      v-on:before-enter="beforeEnter"
                      v-on:enter="enter"
                      v-on:leave="leave"
                      tag="div" >
       <div  class="left-item item" v-for="item in noteList" :key="item.id" @click="noteClick(item)">
         <el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
           <span>{{item.name}}</span>
         </el-tooltip>
       </div>
    </transition-group>
    <div v-if="noteList.length <= 0"  class="left-item">~没有笔记~</div>
  </div>
</template>

<script>
import request from '@/utils/request'
import Velocity from 'velocity'
export default {
  props: {
    notebook: {
      type: Object,
      default: () => {}
    }
  },
  name: 'note',
  data: function () {
    return {
      page: {
        size: 6,
        total: 0,
        current: 1
      },
      noteList: []
    }
  },
  watch: {
    notebook: {
      handler: function (notebook) {
        this.notebook = notebook
        if (this.notebook && this.notebook.id) {
          this.noteList = []
          this.queryNotesByNoteBook()
        }
      },
      immediate: true
    }
  },
  created () {
  },
  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.height = 0
    },
    enter: function (el, done) {
      var delay = el.dataset.index * 150
      setTimeout(function () {
        Velocity(
          el,
          { opacity: 1, height: '50px' },
          { complete: done }
        )
      }, delay)
    },
    leave: function (el, done) {
      var delay = el.dataset.index * 150
      setTimeout(function () {
        Velocity(
          el,
          { opacity: 0, height: 0 },
          { complete: done }
        )
      }, delay)
    },
    queryNotesByNoteBook: function () {
      if (!this.notebook) return
      this.$progress.start()
      request({
        url: '/notebook/note/queryNotesByNoteBook',
        method: 'post',
        data: this.notebook
      }).then(res => {
        if (res.result) {
          this.$progress.done()
          const that = this
          const interval = setInterval(function () {
            if (that.noteList.length > 0) {
              that.noteList.shift()
            } else {
              clearInterval(interval)
              that.addList(res.data)
            }
          }, 50)
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => { this.$progress.done() })
    },
    noteClick: function (note) {
      this.$emit('noteClick', note)
    },
    addList: function (list) {
      const that = this
      let max = list.length
      let index = 0
      const interval = setInterval(function () {
        if (index < max) {
          that.noteList.push(list[index])
          index++
        } else {
          clearInterval(interval)
        }
      }, 50)
    }
  }
}
</script>
